<template>
  <div id="chart"></div>
</template>

<script>
import {Graph} from '@antv/x6'

const data = {
  edges: [{
    source: 'a1',
    target: 'b1',
  }],
  nodes: [
    {
      id: 'b1',
      label: 'label',
      width: 120, height: 60,
      x: 100, y: 100
    },
    {
      id: 'a1',
      label: 'tool',
      width: 120,
      height: 80,
      x: 300, y: 200,
      tools: {
        name: 'boundary',
        args: {
          padding: 5,
          attrs: {
            fill: '#7c68fc',
            stroke: '#9254de',
            strokeWidth: 1,
            fillOpacity: 0.2,
          },
        },
      },
      attrs: {
        body: {
          stroke: 'orange',
        }
      }
    }
  ]
}

export default {
  name: 'tool',
  methods: {
    createGraph() {
      this.graph = new Graph({
        container: document.getElementById('chart'),
        width: window.innerWidth,
        height: window.innerHeight,
        grid: true,
        background: {
          color: '#fffbe6'
        }
      })
      this.graph.fromJSON(data);
      
    },
    addTools() {
      this.graph.on('node:mouseenter', ({node}) => {
        node.addTools({
          name: 'button-remove',
          args: {
            x: '100%',
            y: 0,
            offset: { x: -10, y: 10 },
          },
        })
      })
    },
    removeTools() {
      this.graph.on('node:mouseleave', ({ cell }) => {
        cell.removeTools()
      });
    }
  },
  mounted() {
    this.createGraph();
    this.addTools()
    this.removeTools();
  }
}
</script>
